<template>
  <div class="info-root info-log-count-root">
    <div class="info-title">
      集群日志信息(24小时维度)
      <el-tag type="info" style="margin-left: 10px;">{{ currentMachine.appName }}</el-tag>
    </div>
    <div class="info-content" v-loading="rqLoding">
      <el-descriptions :column="2">
        <el-descriptions-item label="24h Warn:">
          <el-tag class="warn-border warn-bg" effect="dark">{{ warnCount }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="24h Error:">
          <el-tag class="fail-border fail-bg" effect="dark">{{ errorCount }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="24h Info:">
          {{ infoCount }}
        </el-descriptions-item>
        <el-descriptions-item label="24h Debug:">
          {{ debugCount }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, inject } from 'vue';
import { logPieApi } from '@/api/log';

// -------------------- inject
const currentMachine: any = inject('currentMachine')

// -------------------- ref
const debugCount = ref('0');
const infoCount = ref('0');
const warnCount = ref('0');
const errorCount = ref('0');
const rqLoding = ref<boolean>(true)

const getEsLogPie = () => {
  if (currentMachine === undefined || currentMachine.value.appName === '') {
    return;
  }

  rqLoding.value = true;
  let callback = () => {
    setTimeout(() => {
      rqLoding.value = false;
    }, 200);
  }
  logPieApi({ appName: currentMachine.value.appName, indexName: 'index_backend_log' }).then(resp => {
    resp.data.forEach((log:any) => {
        if(log.level === 'DEBUG') {
          debugCount.value = log.value;
        }
        if(log.level === 'INFO') {
          infoCount.value = log.value;
        }
        if(log.level === 'WARN') {
          warnCount.value = log.value;
        }
        if(log.level === 'ERROR') {
          errorCount.value = log.value;
        }
    });
    callback();
  }).catch(() => {
    callback();
  })
}


const reload = () => {
  nextTick(() => {
    getEsLogPie();
  })
}

defineExpose({
  reload,
})

onMounted(() => {
  reload();
})
</script>


<style scoped lang="scss">
.info-log-count-root {
  @include box(100%, 110px);
  min-height: 110px;
}
</style>